<template>
	<div>
		<!-- 横向 -->
		<view class='wrapper horizontal-box ppcScroll' :style="{background: stylesObj.bgoutside}"
			v-if="direction=== 'horizontal'">
			<view class='scale-mask' v-if="!scroll" />
			<!-- 选中的横条  -->
			<view class='zz' :style="{backgroundColor: stylesObj.lineSelect}" />
			<scroll-view class='scroll-view' :scroll-x="true" :scroll-left="centerNum" :scroll-with-animation="true"
				@scroll="bindscroll" :show-scrollbar="false" :enhanced="true">

				<view class='scroll-wrapper'>
					<!-- 左补白 -->
					<view class='seat' :style="{width: windowWidth/2 + 'px'}" />

					<!-- 标尺容器 -->
					<view class='scale-container'>
						<view class='scale-wrapper'>
							<view class='scale-grip' v-for="(item, index) in grid" :key="index"
								:style="{height:h + 'px', borderColor: stylesObj.line }">
								<view class='scale-grip-item' v-for="(it, idx) in 10" :key="idx"
									:style="{width: single + 'px', height: idx===4?'80':'60' + '%', borderColor: stylesObj.line}" />
							</view>
						</view>
						<!-- 标尺数显示，长度：每格长度*个数 -->
						<view class='scale-value-wrapper'
							:style="{width: single*10*grid + 'px', color: stylesObj.fontColor, fontSize: stylesObj.fontSize + 'px'}">
							<view class='scale-value first-scale-value' :style="{width: single*10 + 'px'}">{{min}}
							</view>
							<view v-if="int" style="display: flex;">
								<view class='scale-value' v-for="(item, index) in grid" :key="index"
									:style="{width:single*10 + 'px'}">{{min+10*(index+1)}}
								</view>
							</view>
							<view v-else style="display: flex;">
								<view class='scale-value' v-for="(it, index) in grid" :key="index"
									:style="{width: single*10 + 'px'}">{{min+(index+1)}}
								</view>
							</view>
						</view>
					</view>

					<!-- 右补白 -->
					<view class='seat' :style="{width: windowWidth/2+ 'px'}" />
				</view>
			</scroll-view>
		</view>

		<!-- 竖向 -->
		<view class='wrapper vertical-box' id='scale-wrapper' :style="{background: stylesObj.bgoutside}"
			v-else-if="direction === 'vertical'">
			<view class='scale-mask' v-if="!scroll" />
			<view class='zz' :style="{backgroundColor: stylesObj.lineSelect}" />
			<scroll-view class='scroll-view' style="height: 600rpx;" :scroll-y="true" :scroll-top="centerNum"
				:scroll-with-animation='true' @scroll="bindscroll" :show-scrollbar="false" :enhanced="true">

				<view class='scroll-wrapper'>
					<!-- 左补白 -->
					<view class='seat' :style="{height: windowHeight/2 - single*10/2 + 'px'}" />

					<!-- 标尺容器 -->
					<view class='scale-container'>
						<view class='scale-wrapper'
							:style="{height: single*10*grid + 'px', paddingTop: single*10/2 + 'px'}">
							<view class='scale-grip' v-for="(item, index) in grid" :key="index"
								:style="{borderColor: stylesObj.line}">
								<view class='scale-grip-item' v-for="(it, idx) in 10" :key="idx"
									:style="{height: single + 'px', width: (idx==4||idx==9) ? '80':'60' + '%', borderColor: stylesObj.line}" />
							</view>
						</view>
						<!-- 标尺数显示，长度：每格长度*个数 -->
						<view class='scale-value-wrapper'
							:style="{height: single*10*(grid+1) + 'px', color: stylesObj.fontColor, fontSize: stylesObj.fontSize + 'px'}">
							<view class='scale-value' :style="{height: single*10 + 'px', lineHeight: single*10 + 'px'}">
								{{min}}
							</view>
							<view v-if="int">
								<view class='scale-value' v-for="(item, index) in grid" :key="index"
									:style="{height: single*10 + 'px', lineHeight: single*10 + 'px'}">
									{{min+10*(index+1)}}
								</view>
							</view>
							<view v-else>
								<view class='scale-value' v-for="(it, index) in grid" :key="index"
									:style="{height: single*10 + 'px', lineHeight: single*10 + 'px'}">{{min+(index+1)}}
								</view>
							</view>
						</view>
					</view>

					<!-- 右补白 -->
					<view class='seat' :style="{height: windowHeight/2 - single*10/2 + 'px'}" />
				</view>
			</scroll-view>
		</view>
	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		nextTick,
		onMounted,
		ref
	} from 'vue';
	/**
	 min[number] 默认值 0, // 最小值
	 max[number] 默认值 100, // 最大值
	 int[boolean] 默认值 true, // 是否开启整数模式 ，false为小数模式  true 整数模式
	 single[number] 默认值 10, // 单个格子的实际长度（单位rpx）
	 h[number] 默认值 0,// 自定义高度 初始值为80
	 active[null] 默认值 center ，// 自定义选中位置  （三个值 min, max ,center , 范围内合法数值）
	 styles[object]  // 自定义卡尺样式
	 */
	const emits = defineEmits(['value'])
	const props = defineProps({
		// 最小值
		min: {
			type: Number,
			default: 0,
		},
		// 最大值
		max: {
			type: Number,
			default: 100,
		},
		// 是否开启整数模式
		int: {
			type: Boolean,
			default: false,
		},
		// 每个格子的实际行度 （单位px ，相对默认值）
		single: {
			type: Number,
			default: 10,
		},
		// 高度
		h: {
			type: Number,
			default: 50,
		},
		// 是否禁止滚动
		scroll: {
			type: Boolean,
			default: true,
		},
		// 方向
		direction: {
			type: String,
			default: 'horizontal',
		},
		// 当前选中
		active: {
			type: null,
			default: '0',
		},
		styles: {
			type: Object,
			default: () => {},
		}
	})
	const defaultStyles = ref({
		line: '#dbdbdb', // 刻度颜色
		bginner: '#fbfbfb', // 前景色颜色
		bgoutside: '#dbdbdb', // 背景色颜色
		lineSelect: '#87C38F', // 选中线颜色
		fontColor: '#404040', // 刻度数字颜色
		fontSize: 16, // 字体大小 
	})
	const rul = ref({})
	const windowHeight = ref(0)
	const windowWidth = ref('')
	const horizontalTime = ref(null)
	const verticalTime = ref(null)
	const grid = ref('')
	const centerNum = ref('')
	const stylesObj = ref({})
	onMounted(() => {
		// const min_ = parseInt(props.min, 10) || 0;
		// const max_ = parseInt(props.max, 10) || 100;
		// props.min = min_;
		// props.max = max_;
		init();
	})
	// 初始化
	const init = () => {
		// 设置默认值
		const min_ = props.min || 0;
		const max_ = props.max || 0;
		/**
		 * grid 外层的刻度尺，里面有10个小刻度尺(10个小刻度尺直接拿10遍历出来)
		 * 整数：
		 *  需要除以10，此时里面的一个小刻度尺代表1
		 *  例如：30-80 此时需要5个外层刻度尺。
		 * 小数：
		 *  不需要除以10，此时里面的一个小刻度尺代表0.1
		 *  例如：30-80 此时需要50个外层刻度尺。
		 *
		 */
		let grid_;
		if (props.int) {
			grid_ = (max_ - min_) / 10;
		} else {
			grid_ = (max_ - min_);
		}
		stylesObj.value = Object.assign(defaultStyles.value, props.styles);
		grid.value = grid_;

		// 当前选中的 active
		let activeVal = selectActiveVal();
		if (activeVal < min_ || activeVal > max_) { // 默认数字不合理
			activeVal = (min_ + max_) / 2;
		}
		if (props.int) {
			let diff = (activeVal - min_) / 10; // 移动diff格
			/* eslint-disable-next-line */
			if (diff < 0 || isNaN(diff) || !diff) diff = 0;
			// this.single 每个小格子长度
			const centerNum_ = diff * props.single * 10;
			setTimeout(() => {
				centerNum.value = centerNum_;
			}, 200);
		} else {
			const diff1 = (activeVal - min_) * 10; // 移动diff格
			const centerNum_ = diff1 * props.single;
			setTimeout(() => {
				centerNum.value = centerNum_;
			}, 200);
		}
		//  获取节点信息，获取节点宽度
		uni.getSystemInfo({
			success: (res) => {
				windowWidth.value = res.windowWidth;
			}
		})
		// const appInstance = getCurrentInstance()
		// const query = uni.createSelectorQuery().in(appInstance);
		// query.select('#ppcScroll').boundingClientRect((data) => {
		// 	// res.top; // 这个组件内 #the-id 节点的上边界坐标
		// }).exec((e) => {

		// 	windowWidth.value = e[0].width;
		// 	windowHeight.value = e[0].height;
		// });
	}
	// 给定的选中默认值
	const selectActiveVal = () => {
		// 当前选中位置设置
		let activeVal;
		if (props.active === 'min') {
			activeVal = props.min;
		} else if (props.active === 'max') {
			activeVal = props.max;
		} else if (props.active === 'center') {
			activeVal = (props.min + props.max) / 2;
		} else {
			activeVal = props.active ? props.active : props.min;
		}
		return activeVal;
	}
	// 滚动
	const bindscroll = (e) => {
		// 移动的距离
		let offset = 0;
		if (props.direction === 'vertical') {
			offset = e.detail.scrollTop;
		} else {
			offset = e.detail.scrollLeft;
		}
		// 选中的值
		let value;
		if (props.int) {
			value = props.min + (offset / props.single);
			value = Math.round(value);
			if (value > props.max) value = props.max;
			emits('value', value);
			const centerNum_ = (value - props.min) * props.single + Math.random() ** 10;
			clearTimeout(horizontalTime.value);
			horizontalTime.value = setTimeout(() => {
				centerNum.value = centerNum_;
				emits('value', value);
			}, 100);
		} else {
			value = props.min + ((offset / props.single) / 10);
			value = value.toFixed(1);
			if (value > props.max) value = props.max;
			emits('value', value);
			const centerNum_ = (value - props.min) * props.single * 10 + Math.random() ** 10;
			clearTimeout(verticalTime.value);
			verticalTime.value = setTimeout(() => {
				centerNum.value = centerNum_;
				emits('value', value);
			}, 100);
		}
	}
</script>

<style lang="less" scoped>
	view,
	text {
		box-sizing: border-box;
	}

	.wrapper {
		position: relative;
	}

	.scale-mask {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 100;
	}

	.horizontal-box {
		padding-top: 7%;

		.scroll-wrapper {
			position: relative;
			display: flex;
		}

		.zz {
			position: absolute;
			left: 50%;
			top: 0;
			transform: translate(-50%);
			height: 40%;
			width: 2px;
			background-color: #87C38F;
			z-index: 10;
		}

		.scale-wrapper {
			display: flex;
			border-top: 1px solid #dddddd;
		}

		.scale-grip {
			position: relative;
			height: 100rpx;
			display: flex;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				border-width: 1px;
				border-color: inherit;
				border-style: solid;
				height: 100%;
				transform: translateX(-50%);
				left: 0rpx;
			}

			&:last-child {
				&::after {
					content: "";
					position: absolute;
					top: 0;
					right: 0;
					border-width: 1px;
					border-color: inherit;
					border-style: solid;
					height: 100%;
				}
			}
		}

		.scale-grip-item {
			height: 60%;
			padding-top: 10rpx;

			&:not(:last-child) {
				border-right: 1px solid #000000;
			}
		}

		.scale-value-wrapper {
			position: relative;
			display: flex;
			text-align: center;
		}

		.scale-value {
			color: #87C38F !important;
			padding: 10rpx 0;
			transform: translateX(50%);
		}

		.first-scale-value {
			position: absolute;
			left: 0;
			bottom: 0;
			padding: 10rpx 0;
			transform: translateX(-50%);
		}

		.seat {
			flex-shrink: 0;
			box-sizing: border-box;
			border-top: 1px solid #ddd;
		}
	}

	/* .scale-container{
    display: flex;
  } */
	.vertical-box {
		height: 100%;

		.scroll-wrapper {
			position: relative;
		}

		.scroll-view {
			height: 100%;
		}

		.zz {
			position: absolute;
			top: 50%;
			left: 0;
			transform: translate(-50%);
			width: 40%;
			height: 2px;
			background-color: #87C38F;
			z-index: 10;
		}

		.scale-container {
			display: flex;
			width: 100%;
		}

		.scale-wrapper {
			flex: 1;
		}

		.scale-grip {
			position: relative;
			border-left: 1px solid #000000;

			&:first-child {
				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 80%;
					height: 0;
					border-top: 1px solid #dbdbdb;
				}
			}
		}

		.scale-grip-item {
			height: 60%;
			padding-top: 10rpx;
			border-bottom: 1px solid #000000;
		}

		.scale-value-wrapper {
			position: relative;
			text-align: left;
			flex: 1;
		}

		.scale-value {}
	}

	/* .vertical-box .scale-grip:last-child::after{
    content: "";
    position: absolute;
    top: 0;
    left:0;
    border-width: 1px;
    border-color: inherit;
    border-style: solid;
    width: 100%;
  } */
	/* .vertical-box .first-scale-value{
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 20rpx 0;
    transform: translateX(-50%);
  } */
	/* .vertical-box .seat {
    flex-shrink: 0;
    box-sizing: border-box;
  } */
</style>